<!--  -->
<template>
  <v-app>
    <v-container>
      <v-layout row wrap align-center fill-height justify-center>
        <v-flex xs12 sm8 md4>
          <v-form ref="loginForm">
            <v-card flat >
              <v-card-title>
                <v-layout justify-center column align-center>
                  <v-flex sm12>
                  <span class="display-1 primary--text" >{{VUE_APP_TITLE}}</span>
                  </v-flex>
                  <v-flex sm12><span class="subheading" >会员登陆</span></v-flex>
                </v-layout>
              </v-card-title>
              <v-card-text>
                <v-text-field
                label="用户名称"
                required
                v-model="formData.username"
                :rules="[rules.required]"
                error-messages

                ></v-text-field>
                <v-text-field label="密码"
                required
                v-model="formData.password"
                :append-icon="show1 ? 'visibility_off' : 'visibility'"
                :type="show1 ? 'text' : 'password'"
                @click:append="show1 = !show1"
                :rules="[rules.required]"
                error-messages></v-text-field>
              </v-card-text>
              <v-card-actions>
                <v-layout justify-space-between>
                  <router-link :to="{ name: 'Index' }" class="pa-1 ma-1" >返回首页</router-link>
                  <router-link :to="{ name: 'Register' }" class="pa-1 ma-1" >立即注册</router-link>
                  <v-btn @click="handleLogin"><span>登陆</span><v-icon right >send</v-icon></v-btn>
                </v-layout>
              </v-card-actions>
            </v-card>
          </v-form>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>
// import { LoginHandle } from '@/utils/auth.js'
export default {
  name: 'Login',
  data: function () {
    return {
      logo: require('@/assets/logo.png'),
      formData: {
        username: null,
        password: null
      },
      rules: {
        required: value => !!value || 'Required.'
      },
      show1: false,
      msgStatus: false
    }
  },
  created: function () {

  },
  computed: {
    // msg: function () {
    //   this.msgStatus = (Boolean)(this.$store.state.member.errorMsg)
    //   return this.$store.state.member.errorMsg
    // }
  },
  methods: {
    handleLogin: function() {
      if (this.$refs.loginForm.validate()) {
        this.msgStatus = false
        this.$store.dispatch('doLogin', this.formData).then(() => {
          if (this.$route.query.redirect) {
            this.$router.push(this.$route.query.redirect)
          } else {
            this.$router.push('/')
          }
        })
      }
    }
  }
}
</script>
<style scoped>
</style>
